<template>
	<!-- 轮播图左边菜单 -->
	<div class="conter">
		<div class="content">
			<div class="side-menu">
				<el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="rgba(66,66,71,1)">
					<el-menu-item v-for="(item, index) in this.$store.state.product.list" :key="index"
						@click="toSearch(item.name)">
						<span class="menu-item">{{ item.name}}</span>
						<el-icon class="icons">
							<ArrowRightBold />
						</el-icon>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="swiper-box">
				<!-- 轮播图 -->
				<Rotation> </Rotation>
			</div>
		</div>
		<!-- 广告位 -->
		<headSpan></headSpan>
	</div>
	<!-- 广告位 -->
	<div class="advertising">
		<div class="advertising-box">
			<img
				src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2656295f6c067f48a04a425acf15a096.jpg?thumb=1&w=1226&h=120&f=webp&q=90" />
		</div>
	</div>
	<!-- 商品分类展示 -->
	<div class="shop-list-box">
		<div class="shop-list" v-for="item in productList" :key="item.id">
			<!-- 分类的标题 -->
			<div class="shop-list-title">{{ item.name }}</div>
			<!-- 商品的内容 -->
			<div class="shop-list-content">
				<!-- 商品分类的封面图 -->
				<div class="shop-list-image">
					<img :src="item.image">
				</div>
				<!-- 商品 -->
				<div class="shop-list-project">
					<el-row>
						<el-col v-for="(i,index) in item.classificationdateilsPojo" :key="index"
							@click="toDetail(i.scdid)">
							<el-card :body-style="{ padding: '0px' }" shadow="hover">
								<!-- 商品图片 -->
								<div class="project-image">
									<img :src="i.imagetableList[0]" style="width: 200px; height:200px;" />
								</div>
								<!-- 商品信息 -->
								<div class="project-desc" style="margin-top: 15px">
									<p>{{ i.scdname }}</p>
									<p style="margin-top: 5px">￥{{ i.scdprice }}</p>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</div>
			<div v-if="isRghtShow">
				<!-- 悬浮菜单 -->
				<RightNav v-if="isRghtShow"></RightNav>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ArrowRightBold
	} from "@element-plus/icons";
	import Rotation from "@/components/rotation";
	import headSpan from "@/components/headSpan";
	import RightNav from "@/components/rightNav/index.vue";
	import {
		getCuteList
	} from "@/utils/product"
	export default {
		components: {
			ArrowRightBold,
			Rotation,
			headSpan,
			RightNav,
		},
		data() {
			return {
				widths: window.innerWidth,
				maxwidths: window.outerWidth,
				isRghtShow: true,
				productList: [],

			};
			// 菜单数据
		},
		methods: {
			handleSelect(key, keyPath) {

			},
			toDetail(value) {
				this.$router.push(`/detail/${value}`);
			},
			toSearch(value) {
				this.$router.push({path:"/search",query:{data:value}})
			}
		},
		created() {
			//如果状态长度为0，请求数据
			if (this.$store.state.product.list.length == 0) {
				this.$store.dispatch('getProductList')
			}
			window.onresize = () => {
				return (() => {

					this.widths = window.innerWidth;
					if (this.widths < this.maxwidths * 0.9) {
						this.isRghtShow = false;
					} else {
						this.isRghtShow = true;
					}
				})();
			};
		},
		mounted() {
			if (this.$store.state.product.list.length == 0) {
				this.$store.dispatch("getProductList")
				getCuteList().then(res => {
					const list = res.data.data;
					list.pop();
					this.productList = list
				
				})
			} else {
				// getCuteList().then(res => {
				// 	const list = res.data.data;
				// 	list.pop();
				// 	this.productList = list
				// 	console.log(this.productList)
				// })
				this.productList = this.$store.state.product.list
			}
			// this.productList = this.$store.state.product.list



		}
	};
</script>

<style scoped>
	.el-menu-item {
		font-size: 15px;
		position: relative;
	}

	.is-active {
		color: white;
	}

	.icons {
		color: white;
		position: absolute;
		right: 10px;
		font-size: 15px;
		font-weight: bold;
	}

	.menu-item {
		font-weight: bold;

		color: #ffffff;
		text-align: center;
	}

	.el-menu-vertical-demo {
		width: 100%;
		height: 100%;
	}

	.el-menu-item:not(.is-disabled):hover {
		background: #ff6700;
		color: #ffffff;
	}

	.conter {
		width: 1280px;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.content {
		display: flex;
	}

	.swiper-box {
		width: 80.5%;
	}

	.side-menu {
		width: 19.5%;
	}

	.shop-list-box {
		padding-top: 30px;
		padding-bottom: 20px;
		background: #f5f5f5;

	}

	.shop-list {
		width: 1280px;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.shop-list .shop-list-title {
		text-align: left;
		font-size: 20px;
	}

	.shop-list-content {
		display: flex;
	}

	.shop-list-image {
		margin-top: 20px;
		width: 20%;
		height: 614px;
	}

	.shop-list-project {
		margin-top: 20px;
		height: 614px;
		width: 80%;
	}

	.el-col-24 {
		margin-bottom: 15px;
		margin-left: 10px;
		max-width: 24%;
		height: 300px;
	}

	.el-card {
		height: 295px !important;
	}

	.advertising {
		background: #f5f5f5;
		height: 170px;
		padding: 20px 0px;
	}

	.advertising {
		height: 140px;
	}

	.advertising-box {
		width: 1280px;
		margin: 0 auto;
		margin-top: 20px;
		height: 140px;
	}

	.advertising-box img {
		width: 100%;
		height: 100%;
	}
</style>
